<script setup lang="ts">
    import { ref } from 'vue'
    const list = ref([
        {
            title: 'e单贷',
            data: [
                {
                    name: '中标贷',
                },
                {
                    name: '订单贷',
                },
                {
                    name: '单贷融资',
                },
                {
                    name: '增信助力',
                },
            ]
        },
        {
            title: 'e保函',
            data: [
                {
                    name: '投标保函',
                },
                {
                    name: '履约保函',
                },
                {
                    name: '在线申办',
                },
                {
                    name: '高效便捷',
                },
            ]
        },
        {
            title: 'e贴现',
            data: [
                {
                    name: '汇票贴现',
                },
                {
                    name: '信单贴现',
                },
                {
                    name: '提前收款',
                },
                {
                    name: '加速回笼',
                },
            ]
        },
        {
            title: 'e账融',
            data: [
                {
                    name: '应收账款融资',
                },
                {
                    name: '应收账款折扣',
                },
                {
                    name: '按需收款',
                },
                {
                    name: '灵活调度',
                },
            ]
        }
    ]) 
</script>
<template>
    <div class="gap-[16px] h-[500px]">
        <div class="h-1/6 flex justify-center items-start text-[16px]" style="color: #3D3D3D;">
            品牌提供全方位的供应链金融服务，实现产业链资金高效流转。
        </div>
        <div class="h-5/6 flex">
            <div class="w-1/6">
                <div class="h-1/3 relative" >
                <div class="absolute top-0 left-0 h-3/4 flex">
                    <div class="w-[4px] h-full" style="background: linear-gradient(0deg, #2C91EB 0%, #0973CA 100%);"></div>
                    <div class="ml-[14px]">
                        <h4 class="font-[600]">累计融资规模</h4>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#0973CA] font-[700]">1456</div>
                            <div class="ml-[4px] mb-[6px] font-[500]">亿元</div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="h-2/3 relative bg-zsr">
                <div class="absolute top-0 left-0 h-2/5 flex">
                    <div class="w-[4px] h-full" style="background: linear-gradient(0deg, #2C91EB 0%, #0973CA 100%);"></div>
                    <div class="ml-[14px]">
                        <h4 class="font-[600]">累计融资用户数</h4>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#0973CA] font-[700]">256</div>
                            <div class="ml-[4px] mb-[6px] font-[500]">家</div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="w-5/6 flex">
                <template v-for="(item, index) in list" :key="index">
                    <div class="bg-zsr-2 w-1/4 f-full" >
                        <div class="h-2/7 flex items-center justify-center font-[700] text-[#FFF] text-[20px]">{{ item.title }}</div>
                        <div class="h-3/7 flex items-center flex-col justify-between">
                            <div v-for="(data, index) in item.data" :key="index" class="flex items-center justify-center">
                                <div class="flex items-center">
                                    <div class="√-zsr"></div>
                                    <div class="ml-[6px] text-[16px] text-[#666666]">{{ data.name }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="h-2/7  flex items-center justify-center">
                            <div style="background: linear-gradient(270deg, #2C91EB 0%, #0973CA 100%);" class="w-[80px] h-[34px] text-[#FFF] text-[16px] rounded-[4px] flex items-center justify-center">
                                去开通
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.bg-zsr {
    background-image: url('../assets/image/bg-zsr.png');
    background-size: 100% 100%;
}
.bg-zsr-2 {
    background-image: url('../assets/image/bg-zsr-2.png');
    background-size: 100% 100%;
}
.√-zsr {
    background-image: url('../assets/image/√-zsr.png');
    background-size: 100% 100%;
    width: 16px;
    height: 10px;
}
</style>
